<!--
 * @Author: zqg
 * @Date: 2021-01-10 23:12:18
 * @LastEditors: zqg
 * @LastEditTime: 2021-03-15 17:02:05
 * @Description: 新增/编辑考核规则
-->
<template>
  <base-layout
    :visible-sea="false"
    :visible-content="false"
    :dialog-title="
      -1 === editeIndex ? '新增考核规则' : '编辑考核规则'
    "
    :dialog-visible="dialogVisible"
    @dialog-close="handleClose"
    dialogWidth="60%"
  >
    <template #dialog>
      <el-row>
        <base-content
          ref="baseContent"
          :rulesDetail="addAppraisalQuery"
          @change="addParamChange"
          :ruleType="ruleType"
        />
      </el-row>
      <el-row>
        <el-col>条件规则</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <conditions-content
        ref="conditionsContent"
        :rulesDetail="addAppraisalQuery"
        @change="addParamChange"
        :ruleType="ruleType"
      />
      <el-form-item>
        <div class="explain">
          说明：同一个绩效规则只能同时满足一个条件规则。（例如：达标率>10%,达标率>20%
          两个条件规则，如果达标率是21%则会提成达标率>20%这个绩效）
        </div>
      </el-form-item>
      <el-row>
        <el-col>给予绩效</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <performance-content
        ref="performanceContent"
        @change="addParamChange"
        :rulesDetail="addAppraisalQuery"
        :ruleType="ruleType"
      />
      <div class="footer">
        <el-button
          type="success"
          @click="save"
        >{{
            -1 === editeIndex ? '新增' : '编辑'
          }}考核规则</el-button>
      </div>
    </template>
  </base-layout>
</template>

<script>
import BaseLayout from '@/views/layout/Base'
import baseContent from './addAppraisalDialogContent/baseContent.vue'
import conditionsContent from './addAppraisalDialogContent/conditionsContent.vue'
import performanceContent from './addAppraisalDialogContent/performanceContent.vue'
export default {
  components: {
    BaseLayout,
    conditionsContent,
    performanceContent,
    baseContent
  },
  data() {
    return {
      // 编辑考核列表下标（-1为新增）
      editeIndex: -1,
      // 显示/隐藏弹窗
      dialogVisible: false,
      // 考核规则类型
      ruleType: 0,
      addAppraisalQuery: {
        // 考核制值
        assessValue: '',
        // 考核规则id
        id: '',
        // 绩效金额(固定金额(填写) || 计算金额)
        performanceAmount: '',
        // 绩效金额规则(固定金额 || 计算金额)
        performanceAmountRule: '',
        // 计算方法(+ || — || * || /)
        performanceComputingMethod: '',
        // 绩效指标
        performanceTarget: '',
        // 绩效类型(提成 || 扣除)
        performanceType: '',
        // 绩效单位
        performanceUnit: '',
        // 绩效值
        performanceValue: '',
        // 规则说明
        remark: '',
        // 条件
        ruleCondition: '',
        // 规则范围
        ruleScope: '',
        // 规则单位
        ruleUnit: '',
        // 规则值
        ruleValue: '',
        // 指标值
        targetValue: '',
        // 配件信息
        chooseAccessoriesInfo: null,
        // 项目信息
        chooseProjectInfo: null
      },
      // 表格配置
      tableColumnAttributes: [
        { name: '序号', value: 'updateTime', type: 'text' },
        { name: '指标值', value: 'updateTime', type: 'text' },
        { name: '考核值', value: 'updateTime', type: 'text' },
        { name: '考核规则', value: 'updateTime', type: 'text' },
        { name: '绩效', value: 'updateTime', type: 'text' },
        { name: '规则说明', value: 'updateTime', type: 'text' }
      ],
      tableData: [
        {
          updateTime: '2esda'
        }
      ]
    }
  },
  props: {
    khList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    /**
     * @description: 打开弹窗
     * @param {Number} 考核类型
     * @param {Object} 编辑的考核详情数据
     * @param {Number} 编辑的考核规则下标（-1:新增）
     * @return {viod}
     */
    open(ruleType, editInfo = {}, editeIndex = -1) {
      Object.keys(editInfo).forEach(key => {
        if (this.addAppraisalQuery.hasOwnProperty(key) && editInfo[key]) {
          this.$set(this.addAppraisalQuery, key, editInfo[key])
        }
      })
      this.editeIndex = editeIndex
      this.ruleType = ruleType
      this.dialogVisible = true
    },
    /**
     * @description: 关闭弹窗
     * @param {*}
     * @return {viod}
     */
    handleClose() {
      this.dialogVisible = false
      this.addAppraisalQuery = {
        assessValue: '',
        id: '',
        performanceAmount: '',
        performanceAmountRule: '',
        performanceComputingMethod: '',
        performanceTarget: '',
        performanceType: '',
        performanceUnit: '',
        performanceValue: '',
        remark: '',
        ruleCondition: '',
        ruleScope: '',
        ruleUnit: '',
        ruleValue: '',
        targetValue: '',
        chooseAccessoriesInfo: null,
        chooseProjectInfo: null
      }
      this.$emit('set-visible', false)
    },
    /**
     * @description: 复选框选择状态修改处理
     * @param {boolean} value
     * @return {*}
     */
    ckeckChange(value) {
      this.addAppraisalQuery.performanceType = value
    },
    /**
     * @description: 复制规则
     * @param {Object} 记录信息
     * @return {viod}
     */
    copyRules(row) { },
    /**
     * @description: 编辑规则
     * @param {*} row
     * @return {*}
     */
    eidtRules(row) { },
    /**
     * @description: 删除规则
     * @param {*} row
     * @return {*}
     */
    deleteRules(row) { },
    /**
     * @description: 添加绩效规则
     * @param {*}
     * @return {*}
     */
    addRules() { },
    /**
     * @description: 修改规则信息回调
     * @param {Object} 规则信息内容
     * @return {*}
     */
    addParamChange(info = {}) {
      Object.keys(info).forEach(key => {
        if (this.addAppraisalQuery.hasOwnProperty(key) && info[key]) {
          this.$set(this.addAppraisalQuery, key, info[key])
        }
      })
    },
    /**
     * @description: 新增继续考核
     * @param {*}
     * @return {viod}
     */
    save() {
      Promise.all([
        this.$refs.baseContent.validate(),
        this.$refs.conditionsContent.validate(),
        this.$refs.performanceContent.validate()
      ]).then(allValid => {
        if (allValid.filter(item => !item).length === 0) {
          const queryInfo = this.addAppraisalQuery
          this.$emit('save', this.addAppraisalQuery, this.editeIndex)
          this.handleClose()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0;
}
.footer {
  margin-top: 20px;
  text-align: center;
}
.explain {
  color: rgba(236, 0, 0, 100);
  font-size: 14px;
}
.add-rules {
  text-align: right;
}
.nuit,
.line {
  text-align: center;
}
.tip {
  text-align: center;
  i {
    font-size: 24px;
  }
}
</style>
